<!DOCTYPE>
<html>
	<head>
		<script type="text/javascript" src="src/Tools.js"></script>
		<script type="text/javascript" src="src/FPSCounter.js"></script>
		<script type="text/javascript" src="src/Sprite.js"></script>
		<script type="text/javascript" src="src/Keyboard.js"></script>
		<script type="text/javascript" src="src/PlayerSprite.js"></script>
		<script type="text/javascript" src="src/Player.js"></script>
		<script type="text/javascript" src="src/Enemy.js"></script>
		<script type="text/javascript" src="src/Bullet.js"></script>
		<script type="text/javascript" src="src/Map.js"></script>
		<script type="text/javascript" src="src/EnemyManager.js"></script>
		<script type="text/javascript" src="src/BulletManager.js"></script>

		<link rel="stylesheet" type="text/css" href="css/layout.css">
	</head>
	<body>
		<p id="fps-counter"></p>
		<div id="content">
			<canvas id="canvas" width="600" height="237"></canvas>
		</div>
		<script>
			var canvas = $('canvas');
			var ctx = canvas.getContext('2d');
			lastFrame = new Date().getTime();
			MAX_HEIGHT = 237;
			MAX_WIDTH = 1200;

			// FPS Counter
			var counter = new FPSCounter();

			requestAnimFrame = (function(w) {
				return  w.requestAnimationFrame ||
				 w.webkitRequestAnimationFrame ||
				 w.mozRequestAnimationFrame ||
				 w.oRequestAnimationFrame ||
				 w.msRequestAnimationFrame ||
				 function(c,e) {
					w.setTimeout(c, 100/6);
				 };
			})(window);

			window.run = function() {
				update();
				draw();
				fps = counter.tick();
				if (fps != null)
					$('fps-counter').innerHTML = fps+' fps';
				// calculateFPS();
				requestAnimFrame(run);
			}

			window.update = function() {
				var thisFrame = new Date().getTime();
				var dt = (thisFrame - this.lastFrame)/1000;
        		this.lastFrame = thisFrame;
				player.update(dt);
				EnemyManager.update(dt);
				BulletManager.update();
				map.update();
			}

			window.draw = function() {
				map.render(ctx);
				player.render(ctx);
				EnemyManager.render(ctx);
				BulletManager.render(ctx);
			}

			playerSprite = new PlayerSprite();
			player = new Player();
			map = new Map();
			map.init(canvas.height, canvas.width);
			run();
		</script>
	</body>
</html>